/* src/styles/theme.css */

/* 基础变量定义在 :root (对应 <html>) */
:root {
  /* 默认暗色主题 */
  --bg-color: #fefefe;
  --card-bg-color: #242424;
  --text-color-primary: #e8e8e8;
  --text-color-secondary: #a0a0a0;
  --border-color: #3a3a3a;
  --link-color: #6495ED; /* 基础链接色 */

  /* --- 核心：动态主题色 --- */
  /* 提供一个默认值，会被 Pinia store 的初始值覆盖 */
  --primary-color: #42f0f0;

  /* --- 衍生颜色 (使用 color-mix 现代语法，注意浏览器兼容性) --- */
  /* 如果需要兼容旧浏览器，可能需要 JS 计算或预定义更多变量 */
  --primary-color-light: color-mix(in srgb, var(--primary-color), white 20%);
  --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%);
  --primary-color-alpha: color-mix(in srgb, var(--primary-color), transparent 50%);
  --text-on-primary: #ffffff; /* 主题色上的文字颜色 (假设白色适合大多数亮色) */
}

/* 亮色主题变量 */
html.light-theme {
  --bg-color: #fefefe;
  --card-bg-color: #1f1f1f;
  --text-color-primary: #1f1f1f;
  --text-color-secondary: #a7a7a7;
  --border-color: #1f1f1f;
  --link-color: #a7a7a7;

  /* 亮色模式下的默认主题色 (可以保持和暗色一致，或设置不同) */
  /* --primary-color: #42b983; */

  /* 亮色主题下，主题色上的文字可能需要调整（例如深色主题配白色文字） */
  /* 这里简单假设亮色主题色配深色文字更好 */
  /* 注意：这个逻辑可能需要根据实际选择的主题色动态调整，比较复杂 */
  /* 简单的做法是，如果 primary-color 偏亮，则用深色文字，否则用浅色 */
  /* --text-on-primary: #2c3e50; */
}

/* 基础全局样式 */
body {
  background-color: var(--bg-color);
  color: var(--text-color-primary);
  font-family: sans-serif;
  margin: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* 可以添加一些基础的元素样式，使用变量 */
button {
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-weight: bold;
}

/* 全局定义一个使用主题色的按钮样式 */
.button-primary {
  background-color: var(--primary-color);
  color: var(--text-on-primary); /* 主题色上的文字 */
  border-color: var(--primary-color-dark);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.button-primary:hover {
  background-color: var(--primary-color-light);
  border-color: var(--primary-color);
}

/* 其他全局样式... */